<template>
  <div>
    <van-dropdown-menu>
      <van-dropdown-item
        v-model="value1"
        :options="option1"
        title="综合"
        disabled
      />
      <van-dropdown-item
        v-model="value2"
        :options="option2"
        title="价格"
        @change="priceChange"
      />
      <van-dropdown-item
        v-model="categoryVal"
        :options="option3"
        title="分类"
      />
    </van-dropdown-menu>
    <div class="main">
      <div class="top10">
        <ul :class="isShow ? 'seckill' : 'shwo'">
          <li
            v-for="(item, index) in Mydata"
            :key="index"
            @click="todetail(item.proid)"
          >
            <img :src="item.img1" alt="" />
            <div>
              <p class="van-multi-ellipsis--l2">{{ item.brand }}</p>
              <h4>￥{{ item.originprice }}</h4>
            </div>
          </li>
          <div class="btn-icon" @click="btnclick">
            <van-icon name="fire-o" v-if="isShow" />
            <van-icon name="apps-o" v-else />
          </div>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["Mydata"],
 
  data() {
    return {
      value1: "desc",
      value2: "desc",
      value3: "p",
      categoryVal: "",
      picList: [],
      isShow: false,

      option1: [
        { text: "默认排序", value: "a" },
        { text: "好评排序", value: "b" },
      ],
      option2: [
        { text: "价格从低到高", value: "desc" },
        { text: "价格从高到低", value: "asc" },
      ],
      option3: [
        { text: "默认排序", value: "p" },
        { text: "好评排序", value: "l" },
        { text: "销量排序", value: "m" },
      ],
    };
  },
  methods: {
    btnclick() {},
    todetail(proid) {
      this.$router.push("/detail/" + proid);
    },
    priceChange(value) {
      console.log(value);
      this.$emit("priceChange", value);
    },
  },
   beforeUpdate() {
    Mydata.map((item) => {
      console.log(item.checked);
      if (item.checked) {
        this.categoryVal = item.value;
      }
    });
  },
};
</script>

<style>
</style>